<!--公司预约时间段维护-->
<template>
  <div class="m-window">
    <div class="m-condition">
      <el-row :gutter="5">
        <el-form
          ref="headerRuleForm"
          label-width="70px"
          :inline-message="true"
          label-position="left"
          class="m-headerForm"
        >
          <el-col :span="6">
            <el-form-item label="公司" class="rightItem">
              <el-select
                placeholder="请选择公司"
                v-model="companyCode"
                clearable
              >
                <el-option
                  v-for="(item, index) in companyItem"
                  :key="index"
                  :label="item.companyName"
                  :value="item.companyCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预约日期" class="rightItem">
              <el-date-picker
                v-model="appointTime"
                type="date"
                placeholder="预约日期"
                value-format="yyyy-MM-dd"
                :editable="false"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="2" :offset="6">
            <el-button
              @click="queryAppointTime"
              type="primary"
              :disabled="queryDisabled"
              >查 询</el-button
            >
          </el-col>
          <el-col :span="2">
            <el-button
              @click="addAppointTime"
              type="primary"
              :disabled="addDisabled"
              >新 增</el-button
            >
          </el-col>
          <el-col :span="2">
            <el-button
              @click="editAppointTime"
              type="primary"
              :disabled="editDisabled"
              >编 辑</el-button
            >
          </el-col>
        </el-form>
      </el-row>
    </div>
    <!-- 表格数据 -->
    <div class="m-agTable m-bottom">
      <ag-grid-vue
        class="ag-theme-balham m-agTableContent"
        :gridOptions="gridOptions"
        :columnDefs="columnDefs"
        :rowData="rowData"
        v-loading="loading"
        @rowDoubleClicked="showDialog"
      >
      </ag-grid-vue>
    </div>
    <!-- 弹出框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      v-dialogDrag
    >
      <el-form :model="appointTimeForm" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司代码">
              <el-select
                v-model="appointTimeForm.companyCode"
                placeholder="请选择公司代码"
                @change="companyChange"
              >
                <el-option
                  v-for="(item, index) in companyItem"
                  :key="index"
                  :value="item.companyCode"
                  :label="item.companyCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司名称">
              <el-input
                v-model="appointTimeForm.companyName"
                placeholder="公司名称"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="预约时段">
              <el-time-picker
                is-range
                v-model="appointTimeForm.timeFrame"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                value-format="HH:mm"
              >
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大车数">
              <el-input
                v-model="appointTimeForm.maxCarQty"
                placeholder="请输入最大车数"
                ref="maxCarQty"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="最大柜数">
              <el-input
                v-model="appointTimeForm.maxCabinetQty"
                placeholder="请输入最大柜数"
                ref="maxCabinetQty"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="柜型">
              <el-select
                v-model="appointTimeForm.cabinetType"
                placeholder="请选择柜型"
              >
                <el-option
                  v-for="(item, index) in cabinetTypeItem"
                  :key="index"
                  :value="item"
                  :label="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="最大卡数">
              <el-input
                v-model="appointTimeForm.maxTruckQty"
                placeholder="请输入最大卡数"
                ref="maxTruckQty"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCancel">取 消</el-button>
        <el-button type="primary" @click="dialogSubmit">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import gridOptions from "lesso-common/public/gridOptions";

/**
 * @group companyAppointTime
 * 预约时段维护
 */
export default {
  name: "companyAppointTime",
  data() {
    return {
      queryDisabled: false, //查询按钮可编辑
      addDisabled: false, //新增按钮可编辑
      editDisabled: false, //新增按钮可编辑
      companyCode: "", //公司编码
      companyItem: [], //公司数组
      appointTime: "",

      // 列表数据
      gridOptions: null,
      columnDefs: null,
      rowData: [],
      loading: false,

      //弹出框
      dialogTitle: "新增", //弹出框标题
      dialogFormVisible: false, //弹出框隐藏
      appointTimeForm: {
        //预约时间表格数据
        timeFrame: "", //预约时段
        maxCarQty: "", //最大车数
        companyName: "", //公司名称
        companyCode: "", //公司代码
        maxCabinetQty: "", //最大柜数
        cabinetType: "", //柜型
        maxTruckQty: "", //最大卡数
      },
      cabinetTypeItem: [
        //柜型
        "20HQ",
        "40HQ",
      ],
    };
  },

  beforeMount() {
    this.gridOptions = gridOptions();
    this.columnDefs = [
      {
        headerName: "公司代码",
        field: "companyCode",
        width: 130,
        checkboxSelection: true,
        headerCheckboxSelection: true,
      },
      { headerName: "预约时间段", field: "timeFrame", width: 130 },
      { headerName: "最大预约车数", field: "maxCarQty", width: 130 },
      { headerName: "最大预约柜数", field: "maxCabinetQty", width: 130 },
      { headerName: "最大预约卡数", field: "maxTruckQty", width: 130 },
      { headerName: "剩余预约车数", field: "residueCar", width: 130 },
      { headerName: "公司名称", field: "companyName", width: 230 },
    ];
  },
  created() {
    this.searchCompany();
    this.queryAppointTime();
  },
  methods: {
    /**
     * @vuese
     * 查询当前账户所属公司数据
     */
    searchCompany() {
      var obj = {
        state: 0,
      };
      var that = this;
      this.$http
        .getCompanyInfo(obj)
        .then(function(response) {
          var data = response.data;
          if (data.code == "1" && data.total > 0) {
            let companyData = data.rows.splice(0);
            that.companyItem = companyData;
          } else {
            that.$alert(data.info, {
              showClose: false,
              confirmButton: "确定",
              customClass: "alertFailure",
            });
          }
        })
        .catch((err) => {
          that.$alert("查询公司失败", {
            showClose: false,
            confirmButton: "确定",
            customClass: "alertFailure",
          });
        });
    },

    /**
     * @vuese
     * 查询列表数据
     */
    queryAppointTime() {
      let params = {
          companyCode:this.companyCode,
          time: this.appointTime,
          pageSize:10000,
          current:1,
      };
      this.loading = true;
      this.queryDisabled = true;
      this.$http
        .queryAppointTime(params)
        .then((res) => {
          this.loading = false;
          this.queryDisabled = false;
          let data = res.data;
          if (data.code == 1) {
            let originData = data.rows.splice(0);
            this.rowData = originData;
          } else {
            this.rowData = [];
            this.$message({
              $message: "查询失败",
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.queryDisabled = false;
          this.$alert("查询失败，请检查网络！", {
            confirmButtonText: "确定",
            customClass: "alertFailure",
          });
        });
    },

    /**
     * @vuese
     * 新增预约时段
     */
    addAppointTime() {
      this.dialogFormVisible = true;
      this.dialogTitle = "新增";
    },
    /**
     * @vuese
     * 编辑预约时段
     */
    editAppointTime() {
      let selectRow = this.gridOptions.api.getSelectedRows();
      if (selectRow.length == 1) {
        this.dialogFormVisible = true;
        this.dialogTitle = "编辑";
        this.appointTimeForm = { ...selectRow[0] };
      } else if (selectRow.length > 1) {
        this.$alert("只能选择一行数据编辑", {
          showClose: false,
          confirmButtonText: "确定",
          customClass: "alertPrompt",
        });
      } else {
        this.$alert("请选择要编辑的数据", {
          showClose: false,
          confirmButtonText: "确定",
          customClass: "alertPrompt",
        });
      }
    },

    /**
     * @vuese
     * 关闭弹窗
     */
    dialogCancel() {
      this.appointTimeForm = {};
      this.dialogFormVisible = false;
    },
    /**
     * @vuese
     * 双击打开编辑弹窗
     */
    showDialog(event) {
      this.dialogFormVisible = true;
      let selectRow = event.data;
      this.dialogFormVisible = true;
      this.dialogTitle = "编辑";
      this.appointTimeForm = { ...selectRow };
    },
    /**
     * @vuese
     * 所选公司值变化回调
     */
    companyChange() {
      this.companyItem.forEach((item) => {
        if (this.appointTimeForm.companyCode == item.companyCode) {
          this.appointTimeForm.companyName = item.companyName;
        }
      });
    },
    /**
     * @vuese
     * 确认保存预约时段数据
     */
    dialogSubmit() {
      let msg = "";
      let maxCarQtyLen = this.$refs["maxCarQty"].textLength;
      let maxTruckQtyLen = this.$refs["maxTruckQty"].textLength;
      let maxCabinetQtyLen = this.$refs["maxCabinetQty"].textLength;
      switch (true) {
        case this.appointTimeForm.companyCode == "":
          msg = "公司代码不能为空";
          break;
        case this.appointTimeForm.companyName == "":
          msg = "公司名称不能为空";
          break;
        case this.appointTimeForm.timeFrame == "":
          msg = "预约时段不能为空";
          break;
        case this.appointTimeForm.maxCabinetQty == "":
          msg = "最大柜数不能为空";
          break;
        case maxCabinetQtyLen > 50:
          msg = "最大柜数不能大于50个字符";
          break;
        case this.appointTimeForm.maxCarQty == "":
          msg = "最大车数不能为空";
          break;
        case maxCarQtyLen > 50:
          msg = "最大车数不能大于50个字符";
          break;
        case this.appointTimeForm.cabinetType == "":
          msg = "柜型不能为空";
          break;
        case this.appointTimeForm.maxTruckQty == "":
          msg = "最大卡数不能为空";
          break;
        case maxTruckQtyLen > 50:
          msg = "最大卡数不能大于50个字符";
          break;
      }
      if (msg != "") {
        this.$alert("提示:" + msg, {
          showClose: false,
          confirmButtonText: "确定",
          customClass: "alertPrompt",
        });
        return;
      }
      let params = {
        companyCode: this.appointTimeForm.companyCode, //公司代号
        companyName: this.appointTimeForm.companyName, //公司名称
        creator: this.$global.user.loginName, //创建人
        creatorId: this.$global.user.id, //创建人Id
        maxCabinetQty: this.appointTimeForm.maxCabinetQty, //最大柜数
        maxCarQty: this.appointTimeForm.maxCarQty, //最大车数
        maxTruckQty: this.appointTimeForm.maxTruckQty, //最大卡数
        state: 0,
      };

      //新增
      if (this.dialogTitle == "新增") {
        if (this.appointTimeForm.timeFrame != "") {
          let data = this.appointTimeForm.timeFrame;
          let timeValue = `${data[0]}-${data[1]}`;
          params.timeFrame = timeValue; //预约时段
        } else {
          params.timeFrame = "";
        }
        this.addDisabled = true;
        this.$http
          .addUnAppointTime(params)
          .then((res) => {
            this.addDisabled = false;
            this.dialogFormVisible = false;
            let data = res.data;
            if (data.code == 1) {
              this.$message({
                message: data.info,
                type: "success",
              });
              this.appointTimeForm = {};
              this.queryAppointTime();
            } else {
              this.$alert(`提示:${data.info}`, {
                showClose: false,
                confirmButtonText: "确定",
                customClass: "alertPrompt",
              });
            }
          })
          .catch((error) => {
            this.addDisabled = false;
            this.dialogFormVisible = false;
            this.$alert(error.data.info, {
              confirmButtonText: "确定",
              customClass: "alertFailure",
            });
          });
      } else if (this.dialogTitle == "编辑") {
        //编辑
        let timeFormat = Object.prototype.toString
          .call(this.appointTimeForm.timeFrame)
          .slice(8, -1);
        if (timeFormat == "String") {
          params.timeFrame = this.appointTimeForm.timeFrame; //预约时段
        } else if (timeFormat == "Array") {
          let data = this.appointTimeForm.timeFrame;
          let timeValue = `${data[0]}-${data[1]}`;
          params.timeFrame = timeValue;
        } else {
          params.timeFrame = "";
        }
        params.id = this.appointTimeForm.id; //编辑ID
        params.modifyer = this.$global.user.loginName; //修改人
        params.modifyerId = this.$global.user.id; //修改人ID
        params.creatorId = this.appointTimeForm.creatorId; //创建人ID
        params.creator = this.appointTimeForm.creator; //创建人
        this.editDisabled = true;
        this.$http
          .editUnAppointTime(params)
          .then((res) => {
            this.editDisabled = false;
            this.dialogFormVisible = false;
            let data = res.data;
            if (data.code == 1) {
              this.$message({
                message: data.info,
                type: "success",
              });
              this.appointTimeForm = {};
              this.queryAppointTime();
            } else {
              this.appointTimeForm = {};
              this.$alert(`提示:${data.info}`, {
                showClose: false,
                confirmButtonText: "确定",
                customClass: "alertPrompt",
              });
            }
          })
          .catch((error) => {
            this.editDisabled = false;
            this.dialogFormVisible = false;
            this.appointTimeForm = {};
            this.$alert(error.data.info, {
              confirmButtonText: "确定",
              customClass: "alertFailure",
            });
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
//  .m-agTable{
//     min-height: 650px;
//     .ag-table{
//       height: 100%;
//     }
//   }
</style>
